import React, { useState, useMemo } from "react"
import {
    Button,
    Icon,
    ImgDefault,
    InputNumber,
    message,
    Modal,
    Popover,
    Radio,
    Slider,
    Space,
    Spin,
    Switch,
    Upload
} from "@bytedance/mona-ui"
import { generatedAiInit } from "./generatedAiImages"

function SetVideoContent(props: any) {
    const { copyGoodConfig, goodsDetellData } = props
    const { copynum } = copyGoodConfig
    const [getConterisstatus, setGetConterisstatus] = useState(false)
    const [showUrlContent, setShowUrlContent] = useState('')
    const [renderConfig, setRenderConfig] = useState<any[]>([])

    useMemo(() => {
        setRenderConfig([])

        const { product_id, pic, category_detail, name } = goodsDetellData
        const tiuetrlits = [category_detail.first_cname, category_detail.second_cname, category_detail.third_cname, category_detail.fourth_cname]
        for (let i = 0; i < copynum; i++) {
            const item2 = JSON.parse(JSON.stringify(goodsDetellData.videoDatas))
            item2.lodinStatus = false
            item2.itemFun = generatedAiInit({
                img_format: 1,
                product_id: product_id,
                optimize_strategy: '视频一键生成',
                stopRun: true,
                optimize_strategy_extra: {
                    customized_ai_powered_script: '[]',
                    customized_images: JSON.stringify(pic),
                    product_industrys: JSON.stringify(tiuetrlits),// JSON.stringify(category_name.split('>')),
                    product_name: name,
                    video_ratio: '1'
                },
                // url: item2.url,
                cb: function (data) {
                    console.log('data结果', data.optimized_video_infos)
                    // this.run_end_images.push(...data.run_end_image_obj)
                    item2.lodinStatus = false
                    item2.CoverUrl = data.optimized_video_infos[0].video_cover
                    item2.PlayInfo.MainPlayUrl = data.optimized_video_infos[0].video_url
                    setRenderConfig([...renderConfig])
                    // this.run_end_images = item2.runFunc?.myseta(
                    //     this.run_end_images
                    // )
                    // this.imsdata = this.run_end_images
                    // setAipProtlist([...aipProtlist])
                }.bind(item2),
                setGetAiImageLodinStatus: (status: any) => {
                    // console.log('设置加载中的动画效果', status, item, fortItem)
                    // fortItem.lodinAiStatus = status
                    // setAipProtlist([...aipProtlist])
                    console.log('status', status)
                }
            })
            renderConfig.push(item2)
        }
        setRenderConfig(renderConfig)

    }, [goodsDetellData])
    return <div style={{
        marginLeft: 25
    }} className="moverbox">
        <div className="imsgecontenbo ">
            <Space direction="vertical">
                <div
                    className="sye"
                    style={{
                        color: "#000",
                        fontSize: 14,
                        fontWeight: 900
                    }}>
                    批量调整
                </div>
                <Button size="mini" onClick={() => {
                    setRenderConfig(renderConfig.map((item) => {
                        item.itemFun.runOpenVideo()
                        item.lodinStatus = true
                        return item
                    }))
                }}>批量AI生成视频</Button>

            </Space>
        </div>
        {renderConfig.map((item, index) => {
            return <div key={index} className="imsgecontenbo ">
                <Space direction="vertical">
                    <span>视频 {index + 1}</span>
                    <Space align="end">
                        <Spin spinning={item.lodinStatus}>
                            <div className="seterimage">
                                <ImgDefault src={item.CoverUrl} width={100} height={100}></ImgDefault>
                                {item.PlayInfo.MainPlayUrl && <div className="conterItemStatus" style={{
                                    zIndex: 99999999999
                                }}>
                                    <div className="itemcie">
                                        <Icon type="SeeIcon" className="setIcon" onClick={() => {
                                            setGetConterisstatus(true)
                                            setShowUrlContent(item.PlayInfo.MainPlayUrl)
                                        }}></Icon>
                                    </div>

                                    <div className="itemcie">
                                        <Icon type="DeleteIcon" className="setIcon" onClick={() => {
                                            item.CoverUrl = null
                                            item.PlayInfo.MainPlayUrl = null
                                        }}></Icon>
                                    </div>
                                </div>}
                            </div>
                        </Spin>

                        <Button loading={item.lodinStatus} onClick={() => {
                            item.lodinStatus = true
                            setRenderConfig([...renderConfig])
                            console.log('itemFun', item.itemFun)
                            item.itemFun.runOpenVideo()
                            // setTimeout(() => {
                            //     item.lodinStatus = false
                            //     setRenderConfig([...renderConfig])
                            // }, 1000)
                        }}>
                            <Space>
                                <ImgDefault imgSrc="https://wtplug.oss-cn-hangzhou.aliyuncs.com/webimages/icons/123456.png" width={16} height={16}></ImgDefault>
                                <span>一键生成视频</span>
                            </Space>
                        </Button>
                    </Space>
                </Space>

            </div>
        })}
        <Modal
            title="视频详情"
            visible={getConterisstatus}
            onCancel={() => {
                setGetConterisstatus(false)
                setShowUrlContent('')
            }}
            footer={null}
            width={500}
            destroyOnClose
        >

            <video src={showUrlContent} style={{
                width: '100%'
            }} controls></video>
        </Modal>
    </div>
}

export default SetVideoContent